<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <!--width="100%"表示自适应父容器body的大小，这里就是整个页面-->
    <!--由于页面上此时还会有边框，所以这里直接将边框去掉就可以，拿掉 border="1"-->
    <table cellspacing="0" width="100%" cellpadding="0">
        <tr>
            <td>
                <!--topbar : 1行3列表格-->
                <table width="100%">
                    <tr>
                        <!--这里的&nbsp;&nbsp;为了能够让
                        黑马程序员的图片向右靠一些
                    -->
                        <td>&nbsp;&nbsp;<img src="img/logo2.png" /></td>
                        <td><img src="img/header.jpg" /></td>
                        <td align="center">
                            <!--这里的&nbsp;为了能够让登录、注册和购物车之间的距离大一点-->
                            <a href="javascript:;">登录</a>&nbsp;
                            <a href="javascript:;">注册</a>&nbsp;
                            <a href="javascript:;">购物车</a>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <!--导航条：1行2列表格-->
                <!--
                width="100%" 表示适应父标签大小
                bgcolor="black" 表示表格背景颜色是黑色
                height 表示表格高度是50
            -->
                <table width="100%" bgcolor="black" height="50">
                    <tr>
                        <td>
                            <!--
                            &nbsp;&nbsp; 表示首页字体向右靠靠
                        -->
                            &nbsp;&nbsp;
                            <a href="javascript:;">
                                <font color="white" size="5">首页</font>
                            </a>&nbsp;
                            <!--&nbsp; 在这里表示
                            首页  手机数码  电脑办公  电脑办公  电脑办公  电脑办公距离大一些
                        -->
                            <a href="javascript:;">
                                <font color="white">手机数码</font>
                            </a>&nbsp;
                            <a href="javascript:;">
                                <font color="white">电脑办公</font>
                            </a>&nbsp;
                            <a href="javascript:;">
                                <font color="white">电脑办公</font>
                            </a>&nbsp;
                            <a href="javascript:;">
                                <font color="white">电脑办公</font>
                            </a>
                        </td>
                        <!--
                        align="right" 表示输入的文本框和提交按钮在表格最右面
                    -->
                        <td align="right">
                            <!--placeholder 属性表示文本框中默认显示的内容-->
                            <!--
                            <input type="text"/> 表示输入文本框
                            <input type="button"/> 表示按钮
                        -->
                            <input type="text" placeholder="Search" />
                            <input type="button" value="Submit" />&nbsp;&nbsp;
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <!--轮播图：一张图片-->
                <!--轮播图暂时不书写，这里只写一张图片-->
                <img src="img/1.jpg" width="100%" id="myImg" />
            </td>
        </tr>
        <tr>
            <td>
                <!--热门商品：3行7列表格-->
                <table width="100%">
                    <tr>
                        <td colspan="7">
                            <!--
                        注意：在html中有种标签叫做块级标签，只能自己独立占一行。
                        这样的标签有：标题标签hn、段落标签p、列表标签ul等
                        但是我们这里需要让热门商品的字和图片在一行，我们可以将
                        图片放到h3标题中
                        -->
                            <h3>热门商品&nbsp;<img src="img/title2.jpg" /></h3>
                        </td>
                        <!--<td colspan="6">
                        &nbsp;<img src="img/title2.jpg"/>
                    </td>-->
                    </tr>
                    <!--
                     align="center" 为了让这一行所有列都居中
                -->
                    <tr align="center">
                        <!--
                        rowspan="2" 为了让这一列跨2行
                    -->
                        <td rowspan="2">
                            <img src="img/big01.jpg" width="205" height="404" />
                        </td>
                        <!--
                        colspan="3" 为了让这一列跨3列
                    -->
                        <td colspan="3">
                            <img src="img/middle01.jpg" />
                        </td>
                        <td>
                            &nbsp;&nbsp;<img src="img/small03.jpg" /><br />
                            <a href="javascript:;">
                                <font color="black">冬瓜</font>
                            </a><br />
                            <font color="red">¥299.00</font>
                        </td>
                        <td>
                            &nbsp;&nbsp;<img src="img/small03.jpg" /><br />
                            <a href="javascript:;">
                                <font color="black">冬瓜</font>
                            </a><br />
                            <font color="red">¥299.00</font>
                        </td>
                        <td>
                            &nbsp;&nbsp;<img src="img/small03.jpg" /><br />
                            <a href="javascript:;">
                                <font color="black">冬瓜</font>
                            </a><br />
                            <font color="red">¥299.00</font>
                        </td>
                    </tr>
                    <tr align="center">
                        <!--<td></td>-->
                        <!--由于上一行的第一列跨2行，所以这一行的第一列去掉-->
                        <td>
                            &nbsp;&nbsp;<img src="img/small03.jpg" /><br />
                            <a href="javascript:;">
                                <font color="black">冬瓜</font>
                            </a><br />
                            <font color="red">¥299.00</font>
                        </td>
                        <td>
                            &nbsp;&nbsp;<img src="img/small03.jpg" /><br />
                            <a href="javascript:;">
                                <font color="black">冬瓜</font>
                            </a><br />
                            <font color="red">¥299.00</font>
                        </td>
                        <td>
                            &nbsp;&nbsp;<img src="img/small03.jpg" /><br />
                            <a href="javascript:;">
                                <font color="black">冬瓜</font>
                            </a><br />
                            <font color="red">¥299.00</font>
                        </td>
                        <td>
                            &nbsp;&nbsp;<img src="img/small03.jpg" /><br />
                            <a href="javascript:;">
                                <font color="black">冬瓜</font>
                            </a><br />
                            <font color="red">¥299.00</font>
                        </td>
                        <td>
                            &nbsp;&nbsp;<img src="img/small03.jpg" /><br />
                            <a href="javascript:;">
                                <font color="black">冬瓜</font>
                            </a><br />
                            <font color="red">¥299.00</font>
                        </td>
                        <td>
                            &nbsp;&nbsp;<img src="img/small03.jpg" /><br />
                            <a href="javascript:;">
                                <font color="black">冬瓜</font>
                            </a><br />
                            <font color="red">¥299.00</font>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <!--广告：一张图片-->
                <img src="img/ad.jpg" width="100%" />
            </td>
        </tr>
        <tr>
            <td>
                <!--热门商品：3行7列表格-->
                <table width="100%">
                    <tr>
                        <td colspan="7">
                            <!--
                        注意：在html中有种标签叫做块级标签，只能自己独立占一行。
                        这样的标签有：标题标签hn、段落标签p、列表标签ul等
                        但是我们这里需要让热门商品的字和图片在一行，我们可以将
                        图片放到h3标题中
                        -->
                            <h3>热门商品&nbsp;<img src="img/title2.jpg" /></h3>
                        </td>
                        <!--<td colspan="6">
                        &nbsp;<img src="img/title2.jpg"/>
                    </td>-->
                    </tr>
                    <!--
                     align="center" 为了让这一行所有列都居中
                -->
                    <tr align="center">
                        <!--
                        rowspan="2" 为了让这一列跨2行
                    -->
                        <td rowspan="2">
                            <img src="img/big01.jpg" width="205" height="404" />
                        </td>
                        <!--
                        colspan="3" 为了让这一列跨3列
                    -->
                        <td colspan="3">
                            <img src="img/middle01.jpg" />
                        </td>
                        <td>
                            &nbsp;&nbsp;<img src="img/small03.jpg" /><br />
                            <a href="javascript:;">
                                <font color="black">冬瓜</font>
                            </a><br />
                            <font color="red">¥299.00</font>
                        </td>
                        <td>
                            &nbsp;&nbsp;<img src="img/small03.jpg" /><br />
                            <a href="javascript:;">
                                <font color="black">冬瓜</font>
                            </a><br />
                            <font color="red">¥299.00</font>
                        </td>
                        <td>
                            &nbsp;&nbsp;<img src="img/small03.jpg" /><br />
                            <a href="javascript:;">
                                <font color="black">冬瓜</font>
                            </a><br />
                            <font color="red">¥299.00</font>
                        </td>
                    </tr>
                    <tr align="center">
                        <!--<td></td>-->
                        <!--由于上一行的第一列跨2行，所以这一行的第一列去掉-->
                        <td>
                            &nbsp;&nbsp;<img src="img/small03.jpg" /><br />
                            <a href="javascript:;">
                                <font color="black">冬瓜</font>
                            </a><br />
                            <font color="red">¥299.00</font>
                        </td>
                        <td>
                            &nbsp;&nbsp;<img src="img/small03.jpg" /><br />
                            <a href="javascript:;">
                                <font color="black">冬瓜</font>
                            </a><br />
                            <font color="red">¥299.00</font>
                        </td>
                        <td>
                            &nbsp;&nbsp;<img src="img/small03.jpg" /><br />
                            <a href="javascript:;">
                                <font color="black">冬瓜</font>
                            </a><br />
                            <font color="red">¥299.00</font>
                        </td>
                        <td>
                            &nbsp;&nbsp;<img src="img/small03.jpg" /><br />
                            <a href="javascript:;">
                                <font color="black">冬瓜</font>
                            </a><br />
                            <font color="red">¥299.00</font>
                        </td>
                        <td>
                            &nbsp;&nbsp;<img src="img/small03.jpg" /><br />
                            <a href="javascript:;">
                                <font color="black">冬瓜</font>
                            </a><br />
                            <font color="red">¥299.00</font>
                        </td>
                        <td>
                            &nbsp;&nbsp;<img src="img/small03.jpg" /><br />
                            <a href="javascript:;">
                                <font color="black">冬瓜</font>
                            </a><br />
                            <font color="red">¥299.00</font>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <!--footer:2行1列表格-->
                <table width="100%">
                    <tr>
                        <td>
                            <img src="img/footer.jpg" width="100%" />
                        </td>
                    </tr>
                    <tr>
                        <td align="center">
                            <a href="javascript:;">关于我们 </a>
                            <a href="javascript:;">联系我们 </a>
                            <a href="javascript:;">招贤纳士 </a>
                            <a href="javascript:;">法律声明</a>
                            <a href="javascript:;">友情链接 </a>
                            <a href="javascript:;">支付方式 </a>
                            <a href="javascript:;">配送方式 </a>
                            <a href="javascript:;">服务声明 </a>
                            <a href="javascript:;"> 广告声明 </a>
                            <!--
                            这里使用段落标签是因为我们观看页面发现上面和下面之间有间隙
                        -->
                            <p>Copyright &copy; 2005-2016 传智商城 版权所有</p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    <script type="text/javascript">
        //1.根据dom技术获取轮播图的图片标签对象
        onload = function () {
            //根据标签对象获取src的属性值
            // let str = oImg.src;//"img/3.jpg"
            let oImg = document.getElementById('myImg');
            //2.在匿名函数外面定义一个变量作为图片的名字
            let n = 2;
            //3.开启定时器，时间间隔3秒  setInterval(匿名函数,3000);
            setInterval(function () {
                //4.根据标签对象获取src的属性值并且将变量n的值放到图片名的位置    
                oImg.src = `img/${n}.jpg`;
                //5.修改变量值     
                n++;
                //6.判断变量值是否等于4，如果等于4，修改变量的值变为1
                if (n === 4) {
                    //修改变量的值变为1
                    n = 1
                }
            }, 3000);
        }
    </script>
</body>

</html>